<template>
	<view class="control">
		<!-- 头部 -->
		<view class="header">
			<!-- //操作类型：1请假，2评课，3签到，4签退，5约课，6调课，7消课，8结课 -->
			<image mode="widthFix" :src="headerImage[state]"></image>
			<view class="info-box">
				<nav-bar :title="name"></nav-bar>
				<view class="info">
					<view>
						<view class="flex-space-between">
							<view class="title">{{name}}|{{train_content}}</view>
							<!-- <view class="state">{{state ==0 ? '待开课' :'已上课'}}</view> -->
						</view>
						<view class="flex-align tag-list">
							<view class="tag">{{train_content}}</view>
							<view class="tag">时长{{time_long}}分钟</view>
						</view>
					</view>
					<view class="flex-align" style="margin-top: 20rpx;">
						<view class="info-item">
							<van-icon name="location" size="20rpx" />
							<text>{{hour_time}}</text>
						</view>
						<view class="info-item">
							<van-icon name="clock" size="20rpx" />
							<text>共选择{{selectListlength}}名学生</text>
						</view>
					</view>
					<!-- <view class="flex-align" style="margin-top: 20rpx;">
						<view class="info-item">
							<van-icon name="location" size="20rpx" />
							<text>大连体育馆第一用词</text>
						</view>
						<view class="info-item">
							<van-icon name="clock" size="20rpx" />
							<text>{{hour_time}}</text>
						</view>
					</view> -->
				</view>

			</view>
		</view>
		<!-- <view class="notice flex-align">
			<van-image width="40rpx" height="40rpx" round fit="cover"
				src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
			<text>张涛</text>
			<text>共32名学生参与调课</text>
		</view> -->
		<!-- <view class="notify flex-space-between">
			<view class="flex-align">
				<view class="img" v-for="item in 3" :key="item">
					<van-image fit="cover" round width="40rpx" height="40rpx"
						src="https://img.yzcdn.cn/vant/cat.jpeg" />
				</view>
			</view>
			<view class="info">共3名学生参与预约</view>
		</view> -->
		<!-- //操作类型：1请假，2评课，3签到，4签退，5约课，6调课，7消课，8结课  10签到点名-->
	<!-- 	<u-sticky>
			<u-tabs v-if="state == 1" :list="tabsList1" lineColor="#635DF7" :activeStyle="{
		  color: '#635DF7',
		}" :inactiveStyle="{
		  color: '#353535',
		}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
			<u-tabs v-if="state == 2" :list="tabsList2" lineColor="#635DF7" :activeStyle="{
		  color: '#635DF7',
		}" :inactiveStyle="{
		  color: '#353535',
		}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
			<u-tabs v-if="state == 3" :list="tabsList3" lineColor="#635DF7" :activeStyle="{
		  color: '#635DF7',
		}" :inactiveStyle="{
		  color: '#353535',
		}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
			<u-tabs v-if="state == 4" :list="tabsList4" lineColor="#635DF7" :activeStyle="{
		  color: '#635DF7',
		}" :inactiveStyle="{
		  color: '#353535',
		}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
			<u-tabs v-if="state == 6" :list="tabsList6" lineColor="#635DF7" :activeStyle="{
		  color: '#635DF7',
		}" :inactiveStyle="{
		  color: '#353535',
		}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
			<u-tabs v-if="state == 7" :list="tabsList7" lineColor="#635DF7" :activeStyle="{
		  color: '#635DF7',
		}" :inactiveStyle="{
		  color: '#353535',
		}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
			<u-tabs v-if="state == 8" :list="tabsList8" lineColor="#635DF7" :activeStyle="{
		  color: '#635DF7',
		}" :inactiveStyle="{
		  color: '#353535',
		}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		<u-tabs v-if="state == 10" :list="tabsList8" lineColor="#635DF7" :activeStyle="{
		  color: '#635DF7',
		}" :inactiveStyle="{
		  color: '#353535',
		}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky> -->

		<!-- </u-sticky> -->
		<view >
			<!-- //操作类型：1请假，2评课，3签到，4签退，5约课，6调课，7消课，8补课 -->
			<view class="item" v-if="state == 2">
				<view class="item-title">上课情况</view>
				<view class="flex-space-between">
					<u-rate :count="count" v-model="ratevalue" active-color="#ffd573" size='40rpx'></u-rate>
				</view>
			</view>
			<view class="item" v-if="state == 2">
				<view class="item-title">指标-打分</view>
				<view class="flex-space-between" style="height: 60rpx;width: 90%;" v-for="(item, index) in scoreList"
					:key="index">
					<input class="value" placeholder="请输入指标" v-model="item.lndicator" />
					<input class="value" placeholder="请输入分数" v-model="item.fraction" type="number" />
					<!-- <van-icon style="margin-left: 30rpx;" name="cross" size="34rpx" color="rgb(153,153,153)" @click="removeSubTime(index)" /> -->
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/10a24a69cd8e53b7f910fcb9bedd9ad5b0337fa7.png"
						style="width: 30rpx;height: 30rpx;" @click="removeSubTime(index)" mode=""></image>
				</view>
			</view>
			<view class="" style="width: 10%;height: 40rpx;position: absolute; right: 0;top: 33%;" @click="addIndex"
				v-if="state == 2">
				<!-- <van-icon name="add-o" size="56rpx" color="#6b65f7" /> -->
				<image
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9ac23d35aa1678393805b95bcdb5521b954621fd.png"
					style="width: 30rpx;height: 30rpx;" mode=""></image>
			</view>

			<view class="item" v-if="state == 1">
				<view class="item-title">请假时间</view>
				<view class="flex-space-between" @click="show = true">
					<input type="text" disabled='false' placeholder="选择请假时间" v-model="datatime"
						placeholder-style="font-size: 22rpx">
				</view>
			</view>

			<view class="item" v-if="state == 3">
				<view class="item-title">签到时间</view>
				<view class="flex-space-between" @click="show = true">
					<input type="text" disabled='false' placeholder="选择签到时间" v-model="datatime"
						placeholder-style="font-size: 22rpx">
				</view>
			</view>

			<view class="item" v-if="state == 4">
				<view class="item-title">签退时间</view>
				<view class="flex-space-between" @click="show = true">
					<input type="text" disabled='false' placeholder="选择签退时间" v-model="datatime"
						placeholder-style="font-size: 22rpx">
				</view>
			</view>

			<view class="item" v-if="state == 6">
				<view class="item-title">调课时间</view>
				<view class="flex-space-between" @click="show = true">
					<input type="text" disabled='false' placeholder="选择调课时间" v-model="datatime"
						placeholder-style="font-size: 22rpx">
				</view>
			</view>
			<view class="item" v-if="state == 8">
				<view class="item-title">补课时间</view>
				<view class="flex-space-between" @click="show = true">
					<input type="text" disabled='false' placeholder="选择补课时间" v-model="datatime"
						placeholder-style="font-size: 22rpx">
				</view>
			</view>
			<view class="item" v-if="state == 10">
				<view class="item-title">签到点名</view>
				<view class="flex-space-between" @click="show = true">
					<input type="text" disabled='false' placeholder="选择签到点名时间" v-model="datatime"
						placeholder-style="font-size: 22rpx">
				</view>
			</view>


			<u-datetime-picker :show="show" v-model="value1" mode="datetime" @confirm="timelist" :minDate="-845628841" :maxDate="2856778555000"
				@cancel="show = false"></u-datetime-picker>

			<view class="item"
				v-if="state == 1 ? '请假备注' : state == 2 ? '评课内容'  :state == 6 ? '调课备注' :state == 7 ? '消课备注' :state == 8 ? '补课备注' :state == 10 ? '签到点名' : ''">
				<view class="item-title">评语</view>
				<view class="flex-space-between">
					<textarea v-model="note"
						:placeholder="state == 1 ? '请假备注' : state == 2 ? '评课内容'  :state == 6 ? '调课备注' :state == 7 ? '消课备注' :state == 8 ?'补课备注' :state == 10 ? '签到点名备注' : ''"></textarea>
				</view>
			</view>
			<!-- <view class="text">
			<textarea v-model="note" :placeholder="state===0 ? '请假备注' : '评课备注'"></textarea>
			</view> -->
			<!-- //操作类型：1请假，2评课，3签到，4签退，5约课，6调课，7消课，8补课 -->
			<view class="footer">
				<view class="btn" @click="submit(state)">
					{{state == 1 ? '确认请假' : state == 2 ? '确认评课' : state == 3 ? '确认签到' :state == 4 ? '确认签退' :state == 6 ? '确认调课' :state == 7 ? '确认消课' :state == 8 ?'确认补课' :state == 10 ? '确认签到点名' : ''}}
				</view>
			</view>
		</view>
		<!-- <view v-if="currentTab === 1">
			<view class="item">
				<view class="item-title">记录</view>
				<view class="flex-space-between">
					上完结业啦
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				headerImage: [
					'',
					"https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b00e2d4ab153255cf8412090103afadb36e7cb1d.png",
					"https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fac6046c84510f249a930160cb429ed48ebec29d.png",
					"https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fac6046c84510f249a930160cb429ed48ebec29d.png",
					"https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fac6046c84510f249a930160cb429ed48ebec29d.png",
					"https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fac6046c84510f249a930160cb429ed48ebec29d.png",
					"https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fac6046c84510f249a930160cb429ed48ebec29d.png",
					"https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fac6046c84510f249a930160cb429ed48ebec29d.png",
					"https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fac6046c84510f249a930160cb429ed48ebec29d.png",
				],
				state: '', //0请假，1评课
				note: '', //备注
				count: 5, //评星
				ratevalue: '', //评星
				scoreList: [{
					lndicator: '',
					fraction: ''
				}],
				currentTab: 0,
				tabsList1: [{
						name: "请假"
					},
					{
						name: "记录"
					}
				],
				tabsList2: [{
						name: "评课"
					},
					{
						name: "记录"
					}
				],
				tabsList3: [{
						name: "签到"
					},
					{
						name: "记录"
					}
				],
				tabsList4: [{
						name: "签退"
					},
					{
						name: "记录"
					}
				],
				tabsList6: [{
						name: "调课"
					},
					{
						name: "记录"
					}
				],
				tabsList7: [{
						name: "消课"
					},
					{
						name: "记录"
					}
				],
				tabsList8: [{
						name: "补课"
					},
					{
						name: "记录"
					}
				],
				show: false,
				value1: Number(new Date()),
				datatime: '',
				selectList: [],
				id:"",
				hour_time:"",
				name:"",
				time_long:"",
				train_content:"",
				selectListlength:''
			}
		},
		//操作类型：1请假，2评课，3签到，4签退，5约课，6调课，7消课，8结课
		onLoad(options) {
			const selectList = JSON.parse(decodeURIComponent(options.applicantlist))
			this.selectList = selectList
			console.log(this.selectList.length,'456')
			this.selectListlength = this.selectList.length
			this.state = options.state
			this.id = options.id
			this.train_content = options.train_content
			this.time_long = options.time_long
			this.name = options.name
			this.hour_time = options.hour_time
		},
		methods: {
			timelist(value) {
				this.show = false
				let date = new Date(value.value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				console.log(y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s)
				this.datatime = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
				return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			// 关闭时间弹窗
			showclose() {
				this.show = false
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
			},
			href() {
				uni.navigateTo({
					url: "/page_admin/coach-side/class-home/class-sub/class-add"
				})
			},
			//新增
			addIndex() {
				this.scoreList.push({
					lndicator: '',
					fraction: ''
				})
			},
			//删除
			removeSubTime(indexs) {
				this.scoreList = this.scoreList.filter((item, index) => {
					return index !== indexs
				})
			},
			async submit(state) {
				//操作类型：1请假，2评课，3签到，4签退，5约课，6调课，7消课，8结课
				// this.scoreList.forEach(item => {
				// 	if (!item.key) {
				// 		uni.showToast({
				// 			title: '指标不能为空！',
				// 			icon: 'exception',
				// 			duration: 850
				// 		});

				// 	}
				// })
				console.log(this.scoreList) // 指标
				console.log(this.ratevalue) // 评星
				console.log(this.note) // 备注
				
				if (state == 1) {
					let that = this
					if (that.datatime  == '') {
						uni.showToast({
							title: '请输入请假时间',
							icon: 'none'
						})
						this.show = true
						return
					}
					// 请假
					let params = {
						record_ids: this.selectList, //学员id
						op: state, //操作类型
						sub_leave_time: this.datatime, //请假时间
						leave_text: this.note, //请假事由
						primary_time: this.hour_time, //原课时间
					};
					let res = await train.record(params);
					if (res.code == 1) {
						uni.navigateBack({
								delta:1,//返回层数，2则上上页
							})
					} else {
						uni.showToast({
							title: res.info,
							icon: 'exception',
							duration: 850
						});
					}
				} else if (state == 2) {
					let that = this
					if (that.ratevalue  == '') {
						uni.showToast({
							title: '请输入评星',
							icon: 'none'
						})
						return
					}
					if (that.scoreList  == '') {
						uni.showToast({
							title: '请输入指标',
							icon: 'none'
						})
						return
					}
					if (that.note  == '') {
						uni.showToast({
							title: '请输入评课描述',
							icon: 'none'
						})
						return
					}
					// 评课
					let params = {
						record_ids: this.selectList, //学员id
						op: state, //操作类型
						class_rating_star: this.ratevalue, //评星
						class_evaluation_and_scoring: this.scoreList, //指标
						class_evaluation: this.note, //"评课描述"
					};
					let res = await train.record(params);
					if (res.code == 1) {
						uni.navigateBack({
								delta:1,//返回层数，2则上上页
							})
					} else {
						uni.showToast({
							title: res.info,
							icon: 'exception',
							duration: 850
						});
					}
				} else if (state == 3) {
					let that = this
					if (that.datatime  == '') {
						uni.showToast({
							title: '请输入签到时间',
							icon: 'none'
						})
						this.show = true
						return
					}
					// 3签到
					let params = {
						record_ids: this.selectList, //学员id
						op: state, //操作类型
						sign_in: this.datatime, //签到时间
					};
					let res = await train.record(params);
					if (res.code == 1) {
						uni.navigateBack({
								delta:1,//返回层数，2则上上页
							})
					} else {
						uni.showToast({
							title: res.info,
							icon: 'exception',
							duration: 850
						});
					}
				} else if (state == 4) {
					let that = this
					if (that.datatime  == '') {
						uni.showToast({
							title: '请输入签退时间',
							icon: 'none'
						})
						this.show = true
						return
					}
					// 3签退
					let params = {
						record_ids: this.selectList, //学员id
						op: state, //操作类型
						sign_out: this.datatime, //签退时间
					};
					let res = await train.record(params);
					if (res.code == 1) {
						uni.navigateBack({
								delta:1,//返回层数，2则上上页
							})

					} else {
						uni.showToast({
							title: res.info,
							icon: 'exception',
							duration: 850
						});
					}
				} else if (state == 6) {
					let that = this
					if (that.datatime  == '') {
						uni.showToast({
							title: '请输入调课时间',
							icon: 'none'
						})
						this.show = true
						return
					}
					// 调课
					let params = {
						record_ids: this.selectList, //学员id
						op: state, //操作类型
						transfer_time: this.datatime, //调课时间
						transfer_text: this.note, //请假事由
						primary_time: this.hour_time, //原课时间
					};
					let res = await train.record(params);
					if (res.code == 1) {
						uni.navigateBack({
								delta:1,//返回层数，2则上上页
							})
					} else {
						uni.showToast({
							title: res.info,
							icon: 'exception',
							duration: 850
						});
					}
				} else if (state == 7) {
					// 消课
					let params = {
						record_ids: this.selectList, //学员id
						op: state, //操作类型
						class_elimination_text: this.note, //消课备注
						course_hour_id:this.id //课节id
					};
					let res = await train.record(params);
					if (res.code == 1) {
						uni.navigateBack({
								delta:1,//返回层数，2则上上页
							})
					} else {
						uni.showToast({
							title: res.info,
							icon: 'exception',
							duration: 850
						});
					}
				} else if (state == 8) {
					// 补课
					let params = {
						record_ids: this.selectList, //学员id 
						op: state, //操作类型
						// transfer_time: this.datatime, //调课时间
						// transfer_text: this.note, //请假事由
						// primary_time: '', //原课时间
					};
					let res = await train.record(params);
					if (res.code == 1) {
						uni.navigateBack({
								delta:1,//返回层数，2则上上页
							})
					} else {
						uni.showToast({
							title: res.info,
							icon: 'exception',
							duration: 850
						});
					}
				} else if (state == 10) {
					let that = this
					if (that.datatime  == '') {
						uni.showToast({
							title: '请输入签到时间',
							icon: 'none'
						})
						this.show = true
						return
					}
					// 3签到
					let params = {
						record_ids: this.selectList, //学员id
						op: state, //操作类型
						sign_in: this.datatime, //签到时间
					};
					let res = await train.record(params);
					if (res.code == 1) {
						uni.navigateBack({
								delta:1,//返回层数，2则上上页
							})
					} else {
						uni.showToast({
							title: res.info,
							icon: 'exception',
							duration: 850
						});
					}
				}

				//请假
				// if (this.state === 0) {
				// 	uni.navigateTo({
				// 		url: "/page_admin/coach-side/class-home/class-deail/class-deail"
				// 	})
				// } else {
				// 	//评课
				// 	uni.navigateTo({
				// 		url: "/page_admin/coach-side/class-home/class-deail/class-deail"
				// 	})
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding-bottom: 160rpx;

		.item {
			padding: 29rpx 30rpx 15rpx;
			border-bottom: solid 2rpx rgb(239, 239, 239);

			.item-title {
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #333333;
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			.value {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
			}

			.time-cell {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
				justify-content: flex-start;

				.time {
					width: 49%;

					&:last-of-type {
						margin-left: 20rpx;
					}
				}
			}

			.week-list {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				grid-gap: 20rpx;
				position: relative;

				.week-item {
					padding: 15rpx 0;
					background-color: rgb(243, 243, 243);
					border-radius: 5rpx;
					text-align: center;
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 500;
					border: solid 2rpx transparent;
					box-sizing: border-box;
				}

				.active {
					color: rgb(99, 93, 247);
					background-color: rgba(99, 93, 247, 0.2);
					border: solid 2rpx rgb(99, 93, 247);
					position: relative;

					&:before {
						display: block;
						content: '';
						position: absolute;
						width: 27rpx;
						height: 28rpx;
						right: -2rpx;
						bottom: -2rpx;
						background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
						background-repeat: no-repeat;
						background-size: 100%;
					}
				}

				.check {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					position: absolute;
					bottom: 10rpx;
					right: 0;
				}
			}
		}

		/deep/.u-tabs {
			background-color: #fff;
			border-bottom: 1px solid #e5e5e5;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.header {
			position: relative;

			image {
				width: 100%;
				display: block;
			}

			.info-box {
				position: absolute;
				left: 0;
				height: 100%;
				width: 100%;
				top: 0;
				display: flex;
				flex-direction: column;

				.info {
					padding: 30rpx 30rpx;
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;

					.title {
						color: rgb(51, 51, 51);
						font-size: 30rpx;
						font-weight: 700;
					}

					.state {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 500;
					}

					.tag-list {
						margin-top: 21rpx;

						.tag {
							padding: 5rpx 20rpx 5rpx;
							font-size: 24rpx;
							font-weight: 500;
							background-color: rgb(255, 255, 255);
							border-radius: 40.5rpx;
							color: rgb(41, 166, 241);
							margin-right: 20rpx;

							&:nth-of-type(2) {
								color: rgb(255, 143, 5);
							}
						}
					}

					.info-item {
						margin-right: 50rpx;
						color: rgb(51, 51, 51);
						font-size: 22rpx;
						font-weight: 500;

						&:last-of-type {
							margin-left: 0;
						}

						text {
							margin-left: 4rpx;
						}
					}
				}
			}
		}

		.notice {
			padding: 27rpx 30rpx 26rpx;
			color: rgb(40, 40, 40);
			font-size: 24rpx;
			font-weight: 500;
			background-color: rgb(243, 243, 243);

			text {
				margin-left: 21rpx;
			}
		}
		
		.notify {
			padding: 27rpx 19rpx 26rpx 30rpx;
			color: rgb(40, 40, 40);
			font-size: 24rpx;
			font-weight: 500;
			background-color: rgb(243, 243, 243);
		
			@for $i from 1 through 10 {
				.img:nth-of-type(#{$i+1}) {
					transform: translateX(-10rpx * $i);
				}
			}
		
		}

		.text {
			padding: 40rpx 30rpx;
			color: rgb(51, 51, 51);
			font-size: 26rpx;
			flex: 1;

			textarea {
				width: 100%;
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			box-shadow: 0px -8rpx 51rpx rgba(0, 0, 0, 0.04);
			z-index: 999;

			.btn {
				color: rgb(255, 255, 255);
				background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
				border-radius: 60rpx;
				padding: 26rpx 0;
				font-size: 30rpx;
				text-align: center;
				font-weight: 700;
			}

		}
	}
</style>